<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Popconfirm 气泡确认框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.a-btn{
	margin-left: 200px;
}
.pop-icon{
	height: 22px;
	width: 18px;
	color: red;
}
.btn-cell{
	margin-left: 360px;
}
.btn-cell .ant-btn {
	width: 70px;
	text-align: center;
	padding: 0;
	margin-right: 8px;
	margin-bottom: 8px;
}

</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-popconfirm title="Are you sure delete this task?" ok-text="OK" cancel-text="NO" @confirm="confirm1" @cancel="cancel1">
		<!-- <a href="#">Delete</a> -->
		<a-button type="primary" class="a-btn">Delete</a-button>
	</a-popconfirm>
	
	<a-divider class="a-divi" orientation="left">自定义 Icon 图标</a-divider><!-- =============================================================== -->
	<p class="desc">使用 icon 自定义提示 icon。</p>
	<a-popconfirm title="Are you sure delete this task?">
		<template #icon><question-circle-outlined class="pop-icon"></question-circle-outlined></template>
		<a-button type="primary" class="a-btn">Delete</a-button>
	</a-popconfirm>
	
	<a-divider class="a-divi" orientation="left">条件触发</a-divider><!-- =============================================================== -->
	<p class="desc">可以判断是否需要弹出。</p>
	<a-popconfirm title="Are you sure delete this task?" :open="visible" ok-text="Yes" cancel-text="No"
		@open-change="handleVisibleChange" @confirm="confirm3" @cancel="cancel3">
		<a-button type="primary" class="a-btn">Delete</a-button>
	</a-popconfirm>
	<br /><br />
	<span class="a-btn">是否直接执行：</span> <a-checkbox v-model:checked="condition"></a-checkbox>
	
	<a-divider class="a-divi" orientation="left">国际化</a-divider><!-- =============================================================== -->
	<p class="desc">使用 okText 和 cancelText 自定义按钮文字。</p>
	<a-popconfirm title="Are you sure？" ok-text="确定" cancel-text="取消">
		<a-button type="primary" class="a-btn">Delete</a-button>
	</a-popconfirm>
	
	<a-divider class="a-divi" orientation="left">位置</a-divider><!-- =============================================================== -->
	<p class="desc">位置有十二个方向。如需箭头指向目标元素中心，可以设置 arrowPointAtCenter。</p>
	<div class="btn-cell">
		<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
			<a-popconfirm placement="topLeft" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>TL</a-button>
			</a-popconfirm>
			<a-popconfirm placement="top" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>Top</a-button>
			</a-popconfirm>
			<a-popconfirm placement="topRight" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>TR</a-button>
			</a-popconfirm>
		</div>
		<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
			<a-popconfirm placement="leftTop" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>LT</a-button>
			</a-popconfirm>
			<a-popconfirm placement="left" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>Left</a-button>
			</a-popconfirm>
			<a-popconfirm placement="leftBottom" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>LB</a-button>
			</a-popconfirm>
		</div>
		<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">
			<a-popconfirm placement="rightTop" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>RT</a-button>
			</a-popconfirm>
			<a-popconfirm placement="right" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>Right</a-button>
			</a-popconfirm>
			<a-popconfirm placement="rightBottom" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>RB</a-button>
			</a-popconfirm>
		</div>
		<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
			<a-popconfirm placement="bottomLeft" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>BL</a-button>
			</a-popconfirm>
			<a-popconfirm placement="bottom" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>Bottom</a-button>
			</a-popconfirm>
			<a-popconfirm placement="bottomRight" ok-text="Yes" cancel-text="No" @confirm="confirm">
				<template #title><p>{{ text }}</p></template><a-button>BR</a-button>
			</a-popconfirm>
		</div>
	</div>
	
	<a-divider class="a-divi" orientation="left">基于 Promise 的异步关闭 (3.0+)</a-divider><!-- =============================================================== -->
	<p class="desc">点击确定后异步关闭 Popconfirm，例如提交表单。</p>
	<a-popconfirm title="确定操作吗？" @confirm="confirm6" @cancel="cancel6">
		<a-button type="primary" class="a-btn">Open Popconfirm with Promise</a-button>
	</a-popconfirm>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		visible: false,
		condition: true,
		
		buttonWidth: 70,
		text: 'Are you sure to delete this task?',
	}
},
methods:{
	confirm(e){
		console.log('confirm', e);
	},
	
	confirm1(e){
		console.log('confirm1', e);
	},
	cancel1(e){
		console.log('cancel1', e);
	},
	
	confirm3(e){
		console.log('confirm3', e);
		antd.message.success('Next step.');
	},
	cancel3(e){
		console.log('cancel3', e);
		antd.message.error('Click on cancel.');
	},
	handleVisibleChange(bool){
		console.log(bool);
		if(!bool) {
			this.visible = false;
			return;
		}
		// 在显示popconfirm之前确定条件。
		// console.log(this.condition);
		if (this.condition) {
			this.confirm3(); // next step
		} else {
			this.visible = true;
		}
	},
	
	confirm6(e){
		console.log('confirm6', e);
		return new Promise(resolve => {
			setTimeout(() => {
				antd.message.success('Next step.');
				resolve(true);
			}, 1000);
		});
	},
	cancel6(e){
		console.log('cancel6', e);
		antd.message.error('Click on No.');
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
